<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/detalis.css">
    <link rel="stylesheet" href="./css/magnifier.css">
    
</head>

<body>
    <header>


        <div class="mh-top">
            <div class="left-column">
                <div class="mh-logo">
                    <a href="./index.html"><img src="./img/logo.png" alt=""></a>
                </div>
                <div class="mh-search">
                    <input class="mh-search-input" placeholder="搜索Dell.com">
                    <button class="mh-search-btn"><img src="./img/放大镜.png" alt=""></button>

                </div>

            </div>

            <div class="right-column">
                <div class="cart">
                    <span class="icon"><img src="./img/购物车空.png" alt=""></span>
                    <span class="label">购物车</span>
                    <span class="drop-downs"><img src="./img/下  拉.png" alt=""></span>
                </div>
                <div class="user__login">
                    <span class="icon"><img src="./img/用户.png" alt=""></span>
                    <span class="label" id="baosha">小智521</span>
                    <span class="drop-downs"><img src="./img/下  拉.png" alt=""></span>
                </div>
                <div class="language">
                    <span class="icon"><img src="./img/用户.png" alt=""></span>
                    <span class="label">CN/ZH</span>
                    <span class="drop-downs"><img src="./img/下  拉.png" alt=""></span>
                </div>
            </div>
        </div>


        <div class="mh-bottom">
            <div class="menu1">
                <span>产品
                    <img src="./img/下  拉.png" alt="">
                    <ul>
                        <li>笔记本</li>
                        <li>台式机和一体机</li>
                        <li>二合一笔记本</li>
                        <li>Alienware游戏PC</li>
                        <li>工作站</li>
                        <li>瘦客户端</li>
                        <li>服务器及存储</li>
                        <li>网络交换机</li>
                        <li>显示器</li>
                        <li>外设产品</li>
                    </ul>
                </span>
            </div>
            <div class="menu1" id="menu2">
                <span>解决方案
                    <img src="./img/下  拉.png" alt="">
                    <ul>
                        <li>笔记本</li>
                        <li>台式机和一体机</li>
                        <li>二合一笔记本</li>
                        <li>Alienware游戏PC</li>
                        <li>工作站</li>
                        <li>瘦客户端</li>
                        <li>服务器及存储</li>
                        <li>网络交换机</li>
                        <li>显示器</li>
                        <li>外设产品</li>
                    </ul>
                </span>

            </div>
            <div class="menu1">
                <span>服务
                    <img src="./img/下  拉.png" alt="">
                    <ul>
                        <li>笔记本</li>
                        <li>台式机和一体机</li>
                        <li>二合一笔记本</li>
                        <li>Alienware游戏PC</li>
                        <li>工作站</li>
                        <li>瘦客户端</li>
                        <li>服务器及存储</li>
                        <li>网络交换机</li>
                        <li>显示器</li>
                        <li>外设产品</li>
                    </ul>
                </span>
            </div>
            <div class="menu1">
                <span>支持
                    <img src="./img/下  拉.png" alt="">
                    <ul>
                        <li>笔记本</li>
                        <li>台式机和一体机</li>
                        <li>二合一笔记本</li>
                        <li>Alienware游戏PC</li>
                        <li>工作站</li>
                        <li>瘦客户端</li>
                        <li>服务器及存储</li>
                        <li>网络交换机</li>
                        <li>显示器</li>
                        <li>外设产品</li>
                    </ul>
                </span>
            </div>
            <div class="menu1">
                <span>热卖促销
                    <img src="./img/下  拉.png" alt="">
                    <ul>
                        <li>笔记本</li>
                        <li>台式机和一体机</li>
                        <li>二合一笔记本</li>
                        <li>Alienware游戏PC</li>
                        <li>工作站</li>
                        <li>瘦客户端</li>
                        <li>服务器及存储</li>
                        <li>网络交换机</li>
                        <li>显示器</li>
                        <li>外设产品</li>
                    </ul>
                </span>
            </div>
        </div>
    </header>

    <div class="conter">
        <div class="banner">
            <img src="https://i.dell.com/sites/csimages/Banner_Imagery/all/site-wide-banner1112.png" alt="">
            <div class="text">【全新灵越Plus 高性能创作本】开学购灵越 16 Plus 送17寸游戏背包。 了解详情 | 致电400-881-1858或点击咨询售前优惠</div>

        </div>

    </div>
    <section>
        <div class="daohang">
            <img src="./img/房子.png" alt="">
            <span>中国大陆</span>&emsp;>
            <span>家庭与个人产品</span>&emsp;>
            <span>笔记本</span>&emsp;>
            <span>G系列游戏本</span>&emsp;>
            <span>新G15游戏本</span>&emsp;>
            <span>新G15游戏本</span>
        </div>

    </section>

    <div class="yellow juzhong">
        <p><img src="./img/警告.png" alt=""><span>Hide 1 Compatibility Errors</span></p>
        <p>&emsp;所选的<span>Office</span> 仅与 <span>Windows 家庭版</span>操作系统兼容.请使用所提供的链接修改您的选项.</p>
        <p>&emsp;与您拥有相同配置的用户通常会选择带有复选标记图标的选项。</p>
    </div>


    <div class="box">
        <div class="zuo">
        
        
            <div class="magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover"></div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="https://i.dell.com/is/image/DellContent//content/dam/global-site-design/product_images/dell_client_products/notebooks/g_series/g15_sif_tgl_mlk/media-gallery/cn,-hk,-tw/laptops_g-series_g15_5511_specter_green_rgb_kb_media_gallery_3.psd?fmt=pjpg&pscan=auto&scl=1&wid=5000&hei=5000&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0&size=5000,5000" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="https://i.dell.com/is/image/DellContent//content/dam/global-site-design/product_images/dell_client_products/notebooks/g_series/g15_sif_tgl_mlk/media-gallery/cn,-hk,-tw/laptops_g-series_g15_5511_specter_green_rgb_kb_media_gallery_1.psd?fmt=pjpg&pscan=auto&scl=1&wid=5000&hei=5000&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0&size=5000,5000" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="https://i.dell.com/is/image/DellContent//content/dam/global-site-design/product_images/dell_client_products/notebooks/g_series/g15_sif_tgl_mlk/media-gallery/cn,-hk,-tw/laptops_g-series_g15_5511_specter_green_rgb_kb_media_gallery_1.psd?fmt=pjpg&pscan=auto&scl=1&wid=5000&hei=5000&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0&size=5000,5000" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="https://i.dell.com/is/image/DellContent//content/dam/global-site-design/product_images/dell_client_products/notebooks/g_series/g15_sif_tgl_mlk/media-gallery/cn,-hk,-tw/laptops_g-series_g15_5511_specter_green_rgb_kb_media_gallery_7.psd?fmt=pjpg&pscan=auto&scl=1&wid=5000&hei=5000&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0&size=5000,5000" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="https://i.dell.com/is/image/DellContent//content/dam/global-site-design/product_images/dell_client_products/notebooks/g_series/g15_sif_tgl_mlk/media-gallery/cn,-hk,-tw/laptops_g-series_g15_5511_specter_green_rgb_kb_media_gallery_10.psd?fmt=pjpg&pscan=auto&scl=1&wid=3814&hei=2133&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0&size=3814,2133" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
            </div>
        
        
        </div>
        <div class="you">
            <div class="bobo">

                <div class="bigbox">
                    
                    
                </div>

            </div>

        </div>
    </div>

    <nav>
        <a href="">技术规格</a>
        <a href="">产品特征</a>
        <a href="">商品评价</a>
        <a href="">驱动程序手册和支持</a>
    </nav>
    <div class="imgbox">
        <img src="./img/技术规格.png" alt="" class="img123">
    </div>
    <div class="chanpin">
        <h2>产品特征</h2>
        <hr>

        <div class="zhushi">
            <h2>注释</h2>
            <div class="item">
                ·图片和视频仅供参考，请以实际收货为准。<br>·产品颜色和参数仅供参考，实际请以报价单和实物为准。<br>·起始重量数据因配置不同，其重量数据会有所不同。<br>·电池续航时间将因电脑使用方式或配置不同而异。<br><br>&nbsp;<strong>售后服务说明</strong><br>·本设备仅支持Windows
                10操作系统。为了保障您的正常使用，请勿自行改装为Windows 10操作系统以外的系统（包括但不限于Windows 7或Windows 8.1），否则可能会导致无法开机或Windows
                10系统丢失等情况。因自行改装系统造成机器无法使用等问题的，不享受七天无理由退货。<br>·已激活 Office 的主机，不支持 7 天无理由退货，请您详细了解自身需求后再激活 office
                。<br>·从Windows激活日起六个月内为 Office 激活的有效期。期效内若未激活，Office使用权利将失效。<br>·<a
                    href="//www.dell.com/learn/cn/zh/cncorp1/policies-returns" target="_blank"
                    rel="noopener">7天无理由退换政策</a>
            </div>
        </div>
        <div class="pd-content-wrap">


            <h2 class="pd-bottom-title">操作系统</h2>
            <hr>
            <div class="pd-item-desc"><strong>搭载 Windows 10 家庭版操作系统：</strong>Windows 10 上的游戏体验更胜以往 — 采用 DirectX 12
                技术，可呈现具有 4K 分辨率的游戏画面，且具备游戏直播功能。<a class="technote microcontent"
                    rel="technotes:pc-hardware-requirements">*</a></div>

        </div>

        <div class="pd-feature-wrap TextRightImageLeft " style="">

            <div class="pd-feature-item">

                <div class="pd-media-container">
                    <div class="pd-item-image-wrap ">
                        <img src="//i.dell.com/is/image/DellContent//content/dam/global-site-design/product_images/hmc/images/microsoft/windows11_logo_horiz_blue_rgb.png?fmt=png&amp;wid=555&amp;hei=124"
                            alt="Windows 11" class="u-max-full-width">
                    </div>




                </div>
                <div class="pd-content-wrap">



                    <div class="pd-item-desc"><strong>Windows 11 目前尚未推出</strong> — 将于今年晚些时候面世。届时可免费升级至 Windows 11。<a
                            class="technote microcontent" rel="technotes:hmc-opal-webcam-disclaimer-4">*</a><a
                            href="//www.dell.com/zh-cn/lp/windows-11" target="_blank" rel="noopener">了解详情</a></div>

                </div>
            </div>

        </div>
    </div>


    <div class="qudong">
        <h2>驱动程序、手册与支持</h2>
        <hr>
        <img src="https://i.dell.com/sites/imagecontent/app-merchandizing/responsive/Shop/Browse/assets/en/PublishingImages/laptop-inspiron-14-3437-pdp-design-1_jpg.jpg"
            alt="">
        <div class="qudongwenzi">
            <p>戴尔支持</p>
            <p>从驱动程序和手册到诊断工具和更换部件，戴尔产品支持可满足您的一切需求。</p>
            <button>立即开始</button>
        </div>
    </div>

    <div class="c1"></div>
    <footer>
        <div class="cooperation">
            <div class="footer1">
                <div class="stack">
                    <a href="">CH/ZH</a>
                    <ul>
                        <li>网站地图</li>

                    </ul>
                </div>
                <div class="stack">
                    <a href="">账户</a>
                    <ul>
                        <li>我的账户</li>
                        <li>订单状态</li>
                        <li>我的产品</li>
                    </ul>
                </div>
                <div class="stack">
                    <a href="">支持</a>
                    <ul>
                        <li>支持主页</li>
                        <li>联系我们</li>

                    </ul>
                </div>
                <div class="stack">
                    <a href="">联系我们</a>
                    <ul>
                        <li>社区</li>

                    </ul>
                </div>
            </div>
            <div class="footer2">
                <div class="stack">
                    <a href="">我们的产品和服务</a>
                    <ul>
                        <li>APEX</li>
                        <li>产品</li>
                        <li>解决方案</li>
                        <li>服务</li>

                    </ul>
                </div>
                <div class="stack">
                    <a href="">我们的公司</a>
                    <ul>
                        <li>关于 Dell Technologies</li>
                        <li>工作机会</li>
                        <li>Dell Technologies资本</li>
                        <li>投资者关系</li>
                        <li>新闻编辑室</li>
                        <li>视点</li>
                        <li>产品回收</li>
                        <li>社会影响</li>
                        <li></li>
                    </ul>
                </div>
                <div class="stack">
                    <a href="">我们的合作伙伴</a>
                    <ul>
                        <li>查找合作伙伴</li>
                        <li>戴尔授权店面</li>
                        <li>原始设备制造商</li>
                        <li>合作伙伴计划</li>



                    </ul>
                </div>
                <div class="stack">
                    <a href="">资源</a>
                    <ul>
                        <li>活动</li>
                        <li>术语表</li>
                        <li>资源库</li>
                        <li>试用版软件下载</li>

                    </ul>
                </div>
            </div>

            <nav class="yingwen">
                <div>Dell.com</div>
                <div>Dell Technologles</div>
            </nav>
            <nav class="yingwen2">
                <ul>
                    <li>版权 1999-2021 戴尔公司 (Dell Inc.) 仅适用于中国客户的内容设计 版权所有</li>
                    <li>条款和条件</li>
                    <li>隐私政策</li>
                    <li>法律法规</li>
                    <li>闽ICP备05032923号-1</li>
                    <li>闽公网安备35020602001252号</li>
                    <li>营业执照 913502006120204831</li>

                </ul>
            </nav>
        </div>



    </footer>
    
    
</body>
<script src="./javascripts/details.js"></script>
    <script src="../static/javascripts/jquery-1.11.3.min.js"></script>
    <script src="../static/javascripts/magnifier.js"></script>
    <script type="text/javascript">
        $(function() {
            
            var magnifierConfig = {
                magnifier : "#magnifier1",//最外层的大容器
                width : 450,//承载容器宽
                height : 350,//承载容器高
                moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
                zoom : 5//缩放比例
            };
        
            var _magnifier = magnifier(magnifierConfig);
        
            /*magnifier的内置函数调用*/
            /*
                //设置magnifier函数的index属性
                _magnifier.setIndex(1);
        
                //重新载入主图,根据magnifier函数的index属性
                _magnifier.eqImg();
            */
        });
    </script>

</html>